<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jstl/fmt_rt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%
String ctx = request.getContextPath();
%>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="<%=ctx%>/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="<%=ctx%>/css/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%=ctx%>/js/jquery-1.7.2.js"></script>
<title>查看照片</title>
</head>

<body>

<div class="text-center">
	<div class="text-left" style="width: ${width}px; margin:auto;">
		<strong>照片描述：</strong>${description})
	</div>
	<canvas id="myCanvas" width="${width}" height="${height}">
		您的浏览器不支持此功能，请更换。
	</canvas>
</div>
<script type="text/javascript">
var ctx = '<%=ctx%>';
var cav=document.getElementById("myCanvas").getContext("2d");
function drawShapes() {
	cav.strokeStyle = "red";
	cav.fillStyle = "red";
	
	<c:forEach var="item" items="${markers}" varStatus="status">
		drawShape(${item.type}, ${item.left}, ${item.top}, ${item.right}, ${item.bottom}, ${status.count})
	</c:forEach>
}

function drawShape(type, left, top, right, bottom, index) {
	if (type == 0) {
		drawRect(left, top, right, bottom, index);
	} else if (type == 1) {
		drawOval(left, top, right, bottom, index);
	}
}

/**
 * 画矩形以及文字
 */
function drawRect(left, top, right, bottom, index) {
	var w = right - left;
	var h = bottom - top;
	cav.strokeRect(left, top, w, h);
	
	// 画文字
	drawText("" + index, left, top, w, h);
}

function drawText(txt, x, y, w, h) {
	var size = w / 8;
	if (size < 10) {
		size = 10;
	}
	cav.font = "normal " +  parseInt(size) + "px sans-serif";
	cav.textBaseline = "top";
	cav.fillText(txt, x + (w - size), y + h / 12);
}

/**
 * 画椭圆以及文字
 */
function drawOval(left, top, right, bottom, index) {
	var w = right - left;
	var h = bottom - top;
	// x,y为椭圆中心；a,b分别为椭圆横半轴、纵半轴长度
	var x = left + w / 2;
	var y = top + h / 2;
	var a = w / 2;
	var b = h / 2;
	
	//max是等于1除以长轴值a和b中的较大者
	//i每次循环增加1/max，表示度数的增加
	//这样可以使得每次循环所绘制的路径（弧线）接近1像素
	var step = (a > b) ? 1 / a : 1 / b;
	cav.beginPath();
	cav.moveTo(x + a, y); //从椭圆的左端点开始绘制
	for (var i = 0; i < 2 * Math.PI; i += step)
	{
		//参数方程为x = a * cos(i), y = b * sin(i)，
		//参数为i，表示度数（弧度）
		cav.lineTo(x + a * Math.cos(i), y + b * Math.sin(i));
	}
	cav.closePath();
	cav.stroke();
	
	// 画文字
	drawText("" + index, left, top, w, h);
}

$(document).ready(function() {
	var img = new Image();
	img.onload = function() {
		cav.drawImage(img,0,0);
		drawShapes();
	};
	img.src = attachRoot + '${path}';
});
</script>
<script type="text/javascript" src="<%=ctx%>/js/cms.common.js"></script>

</body>
</html>